#######################################################
# ****************** Button 功能测试 ***************** #
#######################################################
BoxLayout:
  orientation: 'vertical'
  canvas.before:
    Color:
      rgba: 1, .95, .95, .7  # 设置背景颜色 (RGBA)
    Rectangle:
      pos: self.pos
      size: self.size
#  Button:
#    size_hint_y: None
#    height: 50
#    text_size: self.size
#    padding_x: 10
#    Label:
#      text: '按钮下的Label'

  # 自定义label
  BoxLayout:
    canvas.before:
      Color:
        rgba: 0, 1, 0, .5  # 设置颜色为红色
      Line:
        width: 1  # 设置边框宽度
        rectangle: self.x, self.y, self.width, self.height
    size_hint: None, None
    size: 400, 60
    LabelComm:
      canvas.before:
        Color:
          rgba: 1, 0, 0, .5  # 设置颜色为红色
        Line:
          width: 1  # 设置边框宽度
          rectangle: self.x, self.y, self.width, self.height
      text: 'hello'

  Label:
    canvas.before:
      Color:
        rgba: 1, 0, 0, .7  # 设置颜色为红色
      Line:
        width: 1  # 设置边框宽度
        rectangle: self.x, self.y, self.width, self.height
    text: 'Label1'
    size_hint_x: None
    width: 200  # Label 的宽度
    size_hint_y: None
    height: 50
    text_size: self.size
    halign: 'left' # 需要先设置text_size，halign才生效
    valign: 'middle'

  # BoxLayout下默认居中对齐，不同布局可能样式不同
  Button:
    size_hint: (None, None)
    size: (200, 50)
    text: '按钮默认样式'
#    halign: 'left'  # 这行可以省略


  # 按钮默认水平居左对齐，垂直居下对齐
  Button:
    text: '按钮文字居左对齐'
    size_hint: (None, None)
    size: (200, 50)
    text_size: self.size
    color: 0, 0, 0, 1  # 设置文字颜色
    halign: 'left' # 设置水平居左对齐（垂直对齐方式也一起改变了）
    padding: 20,10 # 设置内边距（左，下）


  Button:
    text: '按钮文字居中对齐'
    size_hint_y: None
    height: 50
    halign: 'center'  # 水平对齐: ['left', 'center', 'right', 'justify', 'auto']
    valign: 'middle'  # 垂直对齐: ['bottom', 'middle', 'center', 'top']
    text_size: self.size  # 允许文本自动换行
    padding_x: 10  # 左侧内边距


  # BoxLayout包裹CheckBox和Label实现点击Label也可以选中CheckBox（BoxLayout用来调整整体的大小位置属性）
  BoxLayout:
    size_hint_y: None
    height: 30
    canvas.before:
      Color:
        rgba: .65, .65, 0, .7  # 设置背景颜色 (RGBA)
      Rectangle:
        pos: self.pos
        size: self.size
    CheckBox:
      canvas.before:
        Color:
          rgba: 0, 1, 0, .7  # 设置边框颜色
        Line:
          width: 1  # 设置边框宽度
          rectangle: self.x, self.y, self.width, self.height
      canvas:
        Color:
          rgba: 0, 0, 1, .2  # 设置边框颜色
        Rectangle:
          pos: self.pos
          size: self.size
      id: checkbox
      size_hint_x: None
      width: 40  # CheckBox 的宽度
    Label:
      canvas.before:
        Color:
          rgba: 1, 0, 0, .7  # 设置颜色为红色
        Line:
          width: 1  # 设置边框宽度
          rectangle: self.x, self.y, self.width, self.height
      text: '自定义CheckBox'
      size_hint_x: None
      width: 200  # Label 的宽度
      halign: 'left'
      on_touch_down:
        if self.collide_point(*args[1].pos): checkbox.active = not checkbox.active  # 切换 CheckBox 状态(if中的条件是判断点击是否在当前组件内)
    Button:
      text: '重置'
      size_hint_x: None
      width: 100  # Label 的宽度
      on_press: checkbox.active = False

  # 自定义button和label联合实现计数效果
  BoxLayout:
    canvas.before:
      Color:
        rgba: 0, 1, 0, .7  # 设置颜色为红色
      Line:
        width: 1  # 设置边框宽度
        rectangle: self.x, self.y, self.width, self.height
    size_hint: None, None
    size: 400, 60

    MyButton:
      size_hint: (None, None)
      size: (200, 50)
      label: label1 # 向MyButton传递成员变量
      text: '自定义按钮'
    Label:
      id: cnt_label
      size_hint_y: None
      height: 50
      text: '计数：'
      BubbleContent:
        opacity: .4
        canvas.before:
          Color:
            rgba: 1, 0, 0, .51  # 设置颜色为红色
          Line:
            width: 1  # 设置边框宽度
            rectangle: self.x, self.y, self.width, self.height
        size_hint: (None, None)
        size: (100, 20)
        pos: cnt_label.pos[0], cnt_label.pos[1] + cnt_label.height * 0.7
        BubbleButton:
          canvas.before:
            Color:
              rgba: 0, 0, 1, .51  # 设置颜色为红色
            Line:
              width: 1  # 设置边框宽度
              rectangle: self.x, self.y, self.width, self.height
          text: '一个气泡'
    Label:
      size_hint_y: None
      height: 50
      id: label1
      text: '3'

  # 测试按钮背景色
  BoxLayout:
    padding: 50, 0
    size_hint_y: None
    height: 50
    canvas.before:
      Color:
        rgba: 1, 1, 1, 1  # 设置背景颜色 (RGBA)
      Rectangle:
        pos: self.pos
        size: self.size
    Button:
      background_color: (0.529, 0.808, 0.922, .7)
      size_hint_x: None
      width: 300
      text: '测试按钮颜色1'
    Button:
      background_normal: '../resources/img/button_comm.png'
      background_down: '../resources/img/button_comm_pressed.png'
      size_hint_x: None
      width: 300
      text: '测试按钮颜色2'

  BoxLayout:
    padding: 5
    size_hint: None, None
    size: 200, 50
    canvas.before:
      Color:
        rgba: 1, 0, 0, 1  # 设置背景颜色 (RGBA)
      Line:
        width: 1  # 设置边框宽度
        rectangle: self.x, self.y, self.width, self.height
        dash_length: 10  #  线段的长度
        dash_offset: 5  # 一个线段的末尾和下一个线段的开头之间的偏移量，默认为 0。更改此值将使其成为虚线。
    Label:
      text: '虚线边框'
      canvas.before:
        Color:
          rgba: 0, 1, 0, 1  # 设置背景颜色 (RGBA)
        Line:
          width: 1  # 设置边框宽度
          rectangle: self.x, self.y, self.width, self.height










